{% extends "base.html" %}

{% block title %}国产刮削 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/madouqu.css') }}">
{% endblock %}

{% block content %}
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 搜索区域 -->
        <section class="mb-10">
            <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
                <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
                    <i class="fa fa-search mr-2 text-primary"></i>
                    国产影视刮削
                </h2>
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-grow">
                        <label for="search-keyword" class="block text-sm font-medium text-gray-700 mb-1">番号</label>
                        <div class="relative">
                            <input 
                                type="text" 
                                id="search-keyword" 
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                                placeholder="请输入番号..."
                            >
                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                <i class="fa fa-keyboard-o text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-end">
                        <button id="search-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all flex items-center justify-center card-shadow">
                            <i class="fa fa-search mr-2"></i>
                            搜索
                        </button>
                    </div>
                </div>
                
                <!-- 搜索结果区域 -->
                <div id="search-results" class="mt-6 hidden">
                    <h3 class="text-lg font-medium text-gray-800 mb-3">搜索结果</h3>
                    <div id="results-list" class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                        <!-- 搜索结果将通过JS动态添加 -->
                    </div>
                </div>
            </div>
        </section>

        <!-- 电影详情区域 -->
        <section id="movie-detail-section" class="mb-10 hidden">
            <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-dark flex items-center">
                        <i class="fa fa-info-circle mr-2 text-primary"></i>
                        资源详情
                    </h2>
                    <button id="clear-detail-btn" class="text-gray-500 hover:text-gray-700 transition-all">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <div class="flex flex-col md:flex-row gap-6">
                    <!-- 海报区域 -->
                    <div class="md:w-1/4">
                        <div class="bg-gray-100 rounded-lg overflow-hidden aspect-[2/3] flex items-center justify-center">
                            <img id="movie-poster" src="" alt="封面" class="w-full h-full object-cover">
                        </div>
                        <div class="mt-4">
                            <button id="generate-nfo-btn" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center card-shadow">
                                <i class="fa fa-file-code-o mr-2"></i>
                                生成NFO文件
                            </button>
                        </div>
                    </div>
                    
                    <!-- 信息区域 -->
                    <div class="md:w-3/4">
                        <h3 id="movie-title" class="text-2xl font-bold text-dark mb-2"></h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <div>
                                <p class="text-sm text-gray-500 mb-1">番号</p>
                                <p id="movie-code" class="text-gray-800"></p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500 mb-1">演员</p>
                                <p id="movie-actors" class="text-gray-800"></p>
                            </div>
                        </div>
                        
                        <!-- 提示信息 -->
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 text-sm text-gray-700 mb-6">
                            <p><i class="fa fa-info-circle mr-2"></i> 生成NFO文件后，可将其放置在媒体文件同目录下，媒体服务器会自动识别并显示元数据。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- NFO生成结果区域 -->
        <section id="nfo-result-section" class="hidden">
            <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
                <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
                    <i class="fa fa-file-code-o mr-2 text-primary"></i>
                    NFO生成结果
                </h2>
                
                <div class="space-y-4">
                    <div class="flex flex-col md:flex-row items-start md:items-center gap-2">
                        <div class="text-sm text-gray-500">NFO文件路径：</div>
                        <div id="nfo-file-path" class="bg-gray-50 px-3 py-1.5 rounded text-sm text-gray-800 flex-1 break-all"></div>
                        <button id="download-nfo-btn" class="bg-green-600 hover:bg-green-700 text-white text-sm font-medium py-1.5 px-4 rounded transition-all flex items-center">
                            <i class="fa fa-download mr-1.5"></i>
                            下载NFO
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}

{% block head %}
    <script src="{{ url_for('static', filename='js/madouqu.js') }}"></script>
{% endblock %}